<template>
	<view class="goods">
		<!-- 商品轮播图 -->
		<van-swipe class="my-swipe" :autoplay="3000" lazy-render>
			<van-swipe-item v-for="(gimage,gi) in goods.goods_banner_imgs" :key="'gimage'+gi">
				<image :src="gimage" />
			</van-swipe-item>
		</van-swipe>
		<!-- 商品价格 -->
		<view class="center-padding price-box">
			<view class="price">
				￥{{price}}
			</view>
			<view class="orgin-price">
				价格<text>￥100.00</text>
			</view>
		</view>
		<!-- 优惠券 -->
		<van-cell is-link @click="showCouponModel=true">
			<template #title>
				<view>
					<van-tag :style="{marginRight:'10upx'}" size="large" type="warning" v-for="(c,ci) in coupons"
						:key="'coupon'+ci">
						{{c.valuedesc}}
					</van-tag>
				</view>
			</template>
		</van-cell>
		<!-- 商品名称 -->
		<view class="goods-name center-padding">
			<view class="name">{{goods.name}}</view>
			<view class="share">
				<van-icon name="share"></van-icon>
				<view class="text">分享</view>
			</view>
		</view>
		<van-popup v-model:show="showCouponModel" position="bottom" :style="{ height: '50%' }">
			<view style="text-align: center;padding: 20upx 0;">优惠</view>
			<view class="center-padding">
				<van-cell title="可用:" />
				<coupon v-for="(c,ci) in coupons" :item="c" :key="'coupon'+ci"></coupon>
			</view>
		</van-popup>

		<view class="guarantee-bar" @click="showGuarantee=true">
			<view class="title">
				<van-icon size="50upx" name="smile-o" />
				<text class="text-xxl">放心购</text>
				<text style="font-size: 28upx;margin-left: 20upx;">好物放心买, 售后有保障</text>
			</view>
			<van-icon name="arrow"></van-icon>
		</view>

		<van-popup v-model:show="showGuarantee" position="bottom" :style="{ height: '80%' }">
			<view style="text-align: center;padding: 20upx 0;color:#07c160">
				<van-icon size="40upx" name="thumb-circle" />
				<text style="font-size: 40upx;">放心购</text>
			</view>
			<guarantee-content></guarantee-content>
		</van-popup>

		<!-- 运费 -->
		<view class="row-cell">
			<view class="title">
				运费
			</view>
			<view class="value">
				$0.00-10.00
			</view>
			<van-icon name="arrow"></van-icon>
		</view>
		<!-- 服务支持 -->
		<view class="row-cell" @click="showServer=true">
			<view class="title">
				服务支持
			</view>
			<view class="value">
				支持退换 · 7天无理由退货 · 快递发货
			</view>
			<van-icon name="arrow"></van-icon>
		</view>
		<van-popup v-model:show="showServer" position="bottom" :style="{ height: '50%' }">
			<server-content></server-content>
			<van-button style="position: fixed;bottom: 20upx;" @click="showServer=false" type="danger" block>我知道了
			</van-button>
		</van-popup>
		<!-- 商品属性 -->
		<view class="row-cell" @click="showGoodsAttr=true">
			<view class="title">
				选择
			</view>
			<view class="value">
				数量
			</view>
			<van-icon name="arrow"></van-icon>
		</view>
		<van-popup v-model:show="showGoodsAttr" position="bottom" :style="{ height: '50%' }">
			<sku></sku>
		</van-popup>
		<!-- 评价 -->
		<view class="row-cell" @click="goComment">
			<view class="title">
				评价
			</view>
			<view class="value">
				去评价
			</view>
			<van-icon name="arrow"></van-icon>
		</view>
		<!-- 最新评价 -->
		<view>
			<comment :CommentData="comments[comments.length-1]"></comment>
		</view>
		<!-- 商品详情 -->
		<view style="width: 100%;">
			<u-parse :content="goods.detail" @navigate="navigate"></u-parse>
		</view>

		<!-- 底部加入购物车 -->
		<van-action-bar>
			<van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" dot />
			<van-action-bar-icon icon="cart-o" @click="goCart" text="购物车" :badge="$store.getters.cartGoodsNumber" />
			<van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
			<van-action-bar-button @click="addCart" type="warning" text="加入购物车" />
			<van-action-bar-button @click="goPay" type="danger" text="立即购买" />
		</van-action-bar>

	</view>
</template>

<script>
	const goodsModel = uniCloud.importObject('goods')
	import Stroage from '@/utils/storage.js'
	import Number from '@/utils/number.js'
	import uParse from "@/components/feng-parse/parse.vue"

	import GuaranteeContent from "./components/guarantee.vue"
	import ServerContent from "./components/server.vue"
	import Sku from "./components/sku.vue"
	import Comment from "./components/comment.vue"
	export default {
		components: {
			GuaranteeContent,
			ServerContent,
			Sku,
			uParse,
			Comment
		},
		computed: {
			price() {
				return Number.dobuleNumber(this.goods.price)
			}
		},
		data() {
			return {
				goods: {},
				coupons: [],
				comments: [],
				showCouponModel: false,
				showGuarantee: false,
				showServer: false,
				showGoodsAttr: true
			}
		},
		onLoad(o) {
			this.getGoods(o._id)
		},
		methods: {
			getGoods(id) {
				goodsModel.detail(id).then(res => {
					this.coupons = res.coupon;
					this.goods = res.goods;
					this.sku = res.sku;
					this.comments=res.comments
					this.goods.detail = this.htmlDecodeByRegExp(this.goods.detail)
				})
				// goodsModel.sku(id).then(res => {
				// 	this.attrs = res.data
				// }).catch(e => {})

			},
			htmlDecodeByRegExp(str) {
				var temp = "";
				if (str.length == 0) return "";
				temp = str.replace(/&amp;/g, "&");
				temp = temp.replace(/&lt;/g, "<");
				temp = temp.replace(/&gt;/g, ">");
				temp = temp.replace(/&nbsp;/g, " ");
				temp = temp.replace(/&#39;/g, "\'");
				temp = temp.replace(/&quot;/g, "\"");
				return temp;
			},
			goComment() {
				uni.navigateTo({
					url: "/pages/goods/comment?id="+this.goods._id+"&order_id="+null+"&index="+0
				})
			},
			goPay() {
				let that = this
				uni.showModal({
					title: "是否购买该商品",
					content: `${this.goods.name}-${this.selecAttrName} 价格:${this.price}`,
					success(res) {
						if (res.confirm) {
							// 给他添加商品的时候顺便就清空缓存
							Stroage.set("countCart", [{
								goods_id: that.goods._id,
								name: that.goods.name,
								goods_desc: that.goods.goods_desc,
								num: 1,
								attr_id: that.curAttr,
								price: that.price / 100,
								goods_thumb: that.goods.goods_thumb
							}])
							uni.navigateTo({
								url: "/pages/pay/pay"
							})
						}
					}
				})

			},
			clickAttr(idx) {
				this.curAttr = this.attrs[idx]._id;
				this.show = false;
				this.selecAttrName = this.attrs[idx].sku_name
				this.price = this.attrs[idx].price
			},
			goCart() {
				uni.switchTab({
					url: "/pages/cart/index"
				})
			},
			addCart() {
				// console.log(this);
				let that = this;
				let goods = {
					goods_thumb: that.goods.goods_thumb,
					goods_desc: that.goods.goods_desc,
					name: that.goods.name,
					price: that.price,
					num: 1,
					_id: that.goods._id,
					goods_id: that.goods._id,
					attr_id: that.curAttr,
					attr_name: that.selecAttrName
				}
				this.$store.commit("addCart", goods)
			}
		}
	};
</script>

<style>
	.goods {
		background-color: #f2f2f2;
	}

	.my-swipe {
		height: 750rpx;
	}

	.my-swipe .van-swipe-item {
		height: 750rpx;
	}

	.my-swipe image {
		width: 100%;
		height: 100%;
	}

	.price-box {
		padding-top: 25upx;
		background-color: #fff;
	}

	.price {
		color: var(--van-red);
		font-size: 40upx;
		font-weight: bold;
		margin-bottom: 10upx;
	}

	.orgin-price {
		color: #999;
		font-size: 26upx;
	}

	.orgin-price text {
		text-decoration: line-through;
	}

	.goods-name {
		display: flex;
		padding: 20upx 25upx;
		background-color: #fff;
	}

	.goods-name .name {
		height: 120upx;
		overflow: hidden;
		font-size: 32upx;
		font-weight: bold;
	}

	.goods-name .share {
		margin-top: 20upx;
		min-width: 80upx;
		text-align: center;
	}

	.guarantee-bar {
		margin: 20upx 0;
		padding: 20upx 32upx;
		background-color: #07c160;
		display: flex;
		font-size: 36upx;
		color: #fff;
		justify-content: space-between;
		height: 60upx;
		align-items: center;
	}

	.row-cell {
		padding: 25upx;
		height: 30upx;
		background-color: #FFF;
		display: flex;
		margin: 10upx 0;
		align-items: center;
		font-size: 28upx;
	}

	.row-cell .title {
		min-width: 140upx;
		text-align: left;
		color: #999;
	}

	.row-cell .value {
		flex-grow: 1;
		font-size: 24upx;
	}
</style>
